<template>
  <div class="page_container" style="padding-top: 0px">
    <div class="banner_box">
      <el-carousel trigger="click" height="250px" indicator-position="inside" type="card" style="overflow: hidden">
        <el-carousel-item v-for="item in bannerList" :key="item.infoId" @click="goDetail(item)">
          <img :src="item.url" alt="" class="banner_img">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="travel_goods_box">
      <CategoryNav @change="getTravelInfoList"></CategoryNav>
    </div>
    <div class="goods_list" style="display: flex; flex-wrap: wrap">
      <GoodsItem v-for="(item, index) in travelList" :key="index" :travelInfo = item></GoodsItem>
      <div v-if="travelList.length == 0" style="margin: 20px auto; font-size: 20px; color: #ccc">该类型下暂无旅游产品</div>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "@/utils/config";
  import CategoryNav from './components/CategoryNav'
  import GoodsItem from './components/GoodsItem'
  import {travelInfoList, getSlideShow} from '@/api/info'
  import {decryptionAes128, encryptAes128} from '@/utils/index'
  import { mapGetters } from 'vuex'
  export default {
    name: 'index',
    components: {
      CategoryNav,
      GoodsItem
    },
    computed: {
      ...mapGetters(['size'])
    },
    data () {
      return {
        bannerList: [
          {id: 1, url: 'https://pic5.40017.cn/i/ori/18DpblY9sHe.jpg'},
          {id: 2, url: 'https://pic5.40017.cn/i/ori/1f3O1NPCBGw.jpg'},
          {id: 3, url: 'https://pic5.40017.cn/i/ori/1hCR2ICRPFe.jpg'},
          {id: 4, url: 'https://pic5.40017.cn/i/ori/1gv9LLO3CBa.jpg'}
        ],
        travelList: [],
        listParams: {
          pageNum: 1,
          pageSize: 800
        }
      }
    },
    created() {
      this.getSlideShow()
      console.log(decryptionAes128('BABA1Wk@@Lz7%?8v', 'wg70sT0ThwOYp7pQ9C7AhQ=='), '解密')
      console.log(encryptAes128('BABA1Wk@@Lz7%?8v', 'hello world'), '加密')
    },
    methods: {
      getSlideShow() {
        getSlideShow().then(res => {
          this.bannerList = res
          this.bannerList.forEach(item => {
            item.url = `${baseUrl}${item.url}`
          })
        })
      },
      getTravelInfoList(data = {}) {
        let params = {
          ...data,
          ...this.listParams
        }
        travelInfoList(params).then(res => {
          this.travelList = res.data
          this.handlePictureList()
        })
      },
      handlePictureList() {
        this.travelList.forEach(item => {
          item.pictureUrl = `${baseUrl}${item.pictureUrl}`
        })
      },
      goDetail(item) {
        let {infoId} = item
        this.$router.push({
          name: 'travelDetail',
          query: {
            infoId: infoId
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .banner_img {
    width: 100%;
    height: 100%;
  }
  .travel_goods_box {
    margin-top: 20px;
  }
  .goods_list {
    margin-top: 10px;
    padding: 10px;
    background: #f3f5fa;
  }
</style>
